<template>
    <div class="allOrder">
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>全部订单</span>
                </div>
            </template>
            <!--用户选择的下拉菜单-->
            <el-form :inline="true">
                <el-form-item label="就诊人" size="default" style="width: 30%">
                    <el-select placeholder="请选择就诊人" v-model="patient" @change="changeUser">
                        <el-option label="全部" value=''></el-option>
                        <el-option :label="item.name" v-for="item in patientList" :key="item" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单状态" style="width: 30%">
                    <el-select placeholder="请选择订单状态" v-model="orderStatus" @change="changeStatus">
                        <el-option label="全部" value=''></el-option>
                        <el-option :label="item.comment" v-for="(item,index) in orderStatusList" :key="index" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>
                <!--表格展示所有订单-->
                <el-table border :data="orderList">
                    <el-table-column label="就诊时间" prop="reserveDate" width="110px"></el-table-column>
                    <el-table-column label="医院" prop="hosname" width="150"></el-table-column>
                    <el-table-column label="科室" prop="depname" width="150"></el-table-column>
                    <el-table-column label="医生" prop="title" width="100"></el-table-column>
                    <el-table-column label="服务费" prop="amount" width="80"></el-table-column>
                    <el-table-column label="就诊人" prop="patientName" width="100"></el-table-column>
                    <el-table-column label="订单状态" prop="param.orderStatusString"></el-table-column>
                    <el-table-column label="操作">
                        <template #="{ row }">
                            <el-button type="text" @click="goDetail(row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页器-->
                <el-pagination
                    v-model:current-page="pageNo"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40]"
                    layout="prev, pager, next, jumper,->,total, sizes"
                    :total="total"
                    :background="true"
                    style="margin-top: 40px"
                    @current-change="fetchOrderList"
                    @size-change="handleSize"
                />
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang="ts" name="AllOrder">
    import { ref,onMounted } from 'vue'
    import { useRouter } from "vue-router";
    import { reqOrderList,reqPatient,reqOrderStatus} from '@/api/user'
    import type {OrderListResponseData, OrderList, OrderStatusResponseData,statusList,PatientListResponseData,PatientList} from '@/api/user/type'

    //分页器页码
    const pageNo = ref<number>(1);
    // 展示数据数量
    const pageSize = ref<number>(10);
    // 就诊人信息
    const patient = ref('');
    // 订单状态
    const orderStatus = ref('');
    // 存储所有的订单
    const orderList = ref<OrderList>([])
    // 存储订单总量
    const total = ref<number>(0)
    // 存储所有就诊人信息
    const patientList = ref<PatientList>([]);
    // 存储所有的订单状态
    const orderStatusList = ref<statusList>([]);

    const $router = useRouter()

    // 获取订单函数
    const fetchOrderList = async (page:number=1) => {
        pageNo.value = page
        let result: OrderListResponseData = await reqOrderList(pageNo.value,pageSize.value,patient.value,orderStatus.value)
        if(result.code == 200){
            orderList.value = result.data.records
            total.value = result.data.total
        }
    }
    // 根据不同条件的筛选
    const fetchData = async () => {
        let result: PatientListResponseData = await reqPatient()
        if(result.code == 200){
            patientList.value = result.data
        }
        let result2: OrderStatusResponseData = await reqOrderStatus()
        if(result2.code == 200){
            orderStatusList.value = result2.data
        }
    }

    onMounted( ()=>{
        fetchOrderList();
        fetchData();
    })

    // 点击详情跳转
    const goDetail = (row:any) =>{
        // 跳转路由
        $router.push({
            path:'/user/order',
            query:{
                orderId:row.id
            }
        })
    }

    // 分页器页码范围改变
    const handleSize = (val:number) => {
        pageSize.value = val
        fetchOrderList()
    }

    // 选择就诊人
    const changeUser = () =>{
        fetchOrderList();
    }
    // 选择状态
    const changeStatus = () =>{
        fetchOrderList();
    }

</script>

<style scoped>

</style>